<template>
    <div class="nav-card">
        <div class="nav" v-for="item in navList" :key="item.text" :class="{
            'nav-active': item.path === $route.path
        }" @click="handleClick(item.path)"><span class="item-name">{{ item.text }}</span></div>
    </div>
</template>
<script>
import { getSecondMenu } from "@/api/his/getMenu";
export default {
    name: 'NavCard',
    data() {
        return {
            navList: []
        }
    },
    created() {
      if(this.$route.query.menuId&&this.$route.query.menuId!==undefined){
        localStorage.setItem("menuId",this.$route.query.menuId)
      }
      this.getListMenu();
    },
    methods: {
        handleClick(path) {
            if(this.$route.path === path) return
            this.$router.push(path)
        },
        getListMenu(){
          const parentId = localStorage.getItem("menuId");
          getSecondMenu(parentId).then(response =>{
            this.navList = response.map(item => ({
                text: item.menuName.replace(/系统/g, ''),
                path: this.addLeadingSlash(item.path),
                menuId: item.menuId
            }));
          });
        },
        addLeadingSlash(path) {
            // 确保路径以斜杠开头
            return path.startsWith('/') ? path : `/${path}`;
        },
    }
}
</script>
<style scoped lang="scss">
.nav-card {
    display: flex;
    padding: 0 14px 10px;
    background-color: #fff;
    flex-wrap: wrap;

    .nav {
        margin-top: 10px;
        padding: 20px 44px 18px 44px;
        height: 54px;
        background-color: #EBEFF8;
        border-radius: 5px;
        margin-right: 8px;
        cursor: pointer;
        user-select: none;

        .item-name {
            font-size: 16px;
            color: #2B2B2B;
            font-weight: 500;
            white-space: nowrap;
            line-height: 16px;
        }

        .nav--active {
            background-color: #4373F1;

            .item-name {
                color: #fff;
            }
        }
    }

    .nav-active {
        background-color: #4373F1;

        .item-name {
            color: #FFFFFF;
        }
    }
}
</style>
